<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <title>Document</title>
    <style>
      * {
      }
      .a {
        width: 600px;
        margin: 0 auto;
        margin-top: 200px;
      }

      .a-box {
        border: 1px solid #ccc;
      }

      .a-header {
        padding: 10px;
        background-color: #b2daed;
      }

      .a-content {
        padding: 10px;
        background-color: #badaef;
        color: white;
        display: none;
      }
      .act {
        color: rgb(187, 228, 199);
      }
      .at {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="a">
      <div class="a-box">
        <div class="a-header act" onclick="fn('one')" id="one">手风琴</div>
        <div class="a-content at" id="onetext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('two')" id="two">AAAAA</div>
        <div class="a-content" id="twotext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('three')" id="three">BBBBBB</div>
        <div class="a-content" id="threetext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('four')" id="four">CCCCCCCC</div>
        <div class="a-content" id="fourtext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('fiv')" id="fiv">DDDDDDDD</div>
        <div class="a-content" id="fivtext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('six')" id="six">EEEEEEEEEE</div>
        <div class="a-content" id="sixtext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      $(".a-header").click(function () {
        $(this).next().slideToggle();
        $(this).toggleClass("act");
        $(".a-content").not($(this).next()).slideUp();
        $(".a-header").not($(this)).removeClass("act");
        console.log($(this));
        console.log($(this).next());
        console.log($(".a-content"));
      });
    });
  </script>
</html>
